<!--
 * @FileDescription 
 * @Author lz
 * @Date 20230320 14:50:22
 * @LastEditors lz
 * @LastEditTime 20230320 14:50:22
-->
<template>
    <div class="CategoryColumn">
        <div class="CatBox">
            <img src="/apoImg/men_add.png" class="ico_1">
            <p>Add Point of Interest</p>
        </div>
        <div class="CatBox">
            <img src="/apoImg/men_last.png" class="ico_2">
            <p>Remove Last Point</p>
        </div>
        <div class="CatBox">
            <img src="/apoImg/men_all.png" class="ico_3">
            <p>Remove Last Point</p>
        </div>
        <div class="CatBox">
            <img src="/apoImg/men_send.png" class="ico_4">
            <p>Send Routing Request</p>
        </div>
        <div class="CatBox">
            <img src="/apoImg/men_defa.png" class="ico_5">
            <p>Add Default Routing</p>
        </div>
        <div class="MoreTips">

        </div>
    </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
.CategoryColumn {
    width: 1762px;
    height: 88px;
    background: #1A2225;
    float: right;
}

.CatBox {
    text-align: center;
    height: 88px;
    width: 205px;
    font-size: 20px;
    font-weight: 400;
    color: #C1C8C8;
    margin: 0 10px;
    float: left;
}
.CatBox:hover{
    background-color: rgb(151, 157, 158);
    color: #333;
}
.ico_1 {
    width: 30px;
    height: 29px;
    margin-top: 23px;
}

.ico_2 {
    width: 25px;
    height: 25px;
    margin-top: 25px;
}

.ico_3,
.ico_4,
.ico_5 {
    width: 29px;
    height: 29px;
    margin-top: 23px;
}
.MoreTips{
    float: right;
    margin-top: 29px;
    margin-right: 29px;
    width: 31px;
    height: 31px;
    background-image: url('/apoImg/wenhaoxiao.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
</style>